<template>
  <div>
    <div class="myform">
      <div class="center">
        <img width="100%" src="/image/1448452809.jpg" alt="" />
        <div style="display: flex">
          <div style="width: 70%;">
            <div class="top" style="width: 100%;">
              <img id="imgbig" width="100%" height="450" :src="`/mp${data[0].image2}`" alt="" />
            </div>
            <div class="foot" style="width: 100%;">
              <img @click="changeImg" width="30%" height="100" :src="`/mp${data[0].image2}`" alt="" />
              <img @click="changeImg" width="30%" height="100" :src="`/mp${data[0].image3}`" alt="" />
              <img @click="changeImg" width="30%" height="100" :src="`/mp${data[0].image4}`" alt="" />
            </div>
          </div>
          <div style="margin-left:5%">
            <h4 style="color: #543019; margin-bottom: 80%">
              {{data[0].title}}
            </h4>
            <div style="color: #572f1b; font-size: 13px">
              <input type="checkbox" />
              <span
                >{{data[0].price}}</span
              >
            </div>
            <div style="color: #572f1b; font-size: 13px">
              <span>购买数量：</span>
              <select>
                <option>1</option>
              </select>
            </div>
            <div style="color: #572f1b; font-size: 13px">
              <span style="font-size: 18px">总计</span>
              <span style="font-size: 35px; color: #543019; font-weight: bold"
                >{{data[0].price.split("/")[0]}}</span
              >
            </div>
            <div>
              <button style="margin-right:20px">加入购物车</button>
              <button>直接购买</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted () {
    this.getData()
    // console.log(this.$route.query.wid);
  },
  data() {
    return {
      data:[]
    }
  },
  methods: {
    changeImg(e){
      imgbig.src=e.target.src
    },
    getData() {
      let url=`/mp/cakes_xq/${this.$route.query.wid}`
      this.axios.get(url).then(res=>{
        console.log(res);
        this.data=res.data.data
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.myform {
  margin-top: 40px;
  .center {
    padding: 10px;
    border: 1px solid blanchedalmond;
    background-color: #f3f0ed;
    width: 50%;
    margin: auto;
    div>div:last-child>div{
      margin-bottom: 5%;
    }
    button {
      color: white;
      background: #543019;
      font-size: 13px;
      padding: 5px;
      width: 100px;
    }
    .foot > img {
      margin-right: 10px;
    }
  }
}
</style>